<template>
	<view>
		<!-- 返回首页 -->
		<uni-bankhome />
		<scroll-view scroll-anchoring enableBackToTop="true" @scrolltolower="loadmore()" scroll-with-animation scroll-y
			lower-threshold="250" class="scoll-page">
			<!-- 搜索 -->
			<view class="nodata" v-if="activityList===''">
				<u-loading mode="circle" size="28"></u-loading> 加载中……
			</view>
			<view class="nodata" v-else-if="activityList.length===0">
				<image src="@/static/nodata.png" mode=""></image>
				<!-- <p>暂无数据!</p> -->
			</view>
			<!-- 一行一个商品展示 -->
			<view v-else>
				<view v-for="(item, index) in activityList" :key="index" class="goods-item"
					@click="navigateToStoreDetailPage(item)">
					<view class="image-wrapper">
						<image style="width:100%;vertical-align: top;" :src="item.posterUrl" mode="aspectFill"></image>
					</view>
					<view class="goods-detail">
						<div class="title clamp">
							{{ item.name }}
						</div>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</scroll-view>
	</view>

</template>

<script>
	import {
		GetActivity
	} from "@/api/home.js"
	export default {
		data() {
			return {
				scrollTop: 0,
				loadIndex: 10,
				oldKeywordIndex: "",
				goodsHeight: "",
				keyword: "",
				activityList: [],
				loadingType: "more", //加载更多状态
				params: {
					pageNumber: 1,
					pageSize: 10,
					// sort: 'grade_asc',
				},
				routerVal: "",
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad(val) {
			this.loadData()
		},
		onReachBottom() {
			if (this.loadingType == "noMore") return
			this.params.pageNumber++
			this.loadData()

		},
		mounted() {
			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync()
			let topHeight = 0
			let navHeight = 0
			uni.getSystemInfo({
				success: function(res) {
					// res - 各种参数
					let top = uni.createSelectorQuery().select(".u-navbar")
					top
						.boundingClientRect(function(data) {
							if (data && data.height) {
								//data - 各种参数
								topHeight = data.height // 获取元素宽度
							}
						})
						.exec()
					let nav = uni.createSelectorQuery().select(".navbar")
					nav
						.boundingClientRect(function(data) {
							if (data && data.height) {
								//data - 各种参数
								navHeight = data.height // 获取元素宽度
							}
						})
						.exec()
				},
			})
			this.goodsHeight = windowHeight - navHeight - topHeight
			// #ifdef APP-PLUS
			this.goodsHeight = this.goodsHeight - 100
			// #endif
			this.goodsHeight += "px"
		},

		methods: {
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type, loading) {
				this.loadingType = "loading"
				if (type == "refresh") {
					this.activityList = []
				}
				//没有更多直接返回 #TODO
				let activityList = await GetActivity({
					pageSize: 10,
					pageNumber: this.params.pageNumber,
				})
				if (activityList.data.result.records.length < 10) {
					this.loadingType = "noMore"
				}
				if (this.activityList === '') {
					this.loadingType = "noMore"
					this.activityList = []
				}

				this.activityList.push(...activityList.data.result.records)
				uni.hideLoading()
			},
			// 格式化金钱  1999 --> [1999,00]
			formatPrice(val) {
				if (typeof val == "undefined") {
					return val
				}
				return val.toFixed(2).split(".")
			},
			// 跳转地址
			navigateToStoreDetailPage(item) {
				if (item.activityType == '0') {
					uni.navigateTo({
						url: `/pages/product/activitys/activitys?id=${item.id}`,
					})
				} else {
					uni.navigateTo({
						url: `/pages/product/activePage?id=${item.id}`,
					})
				}
			},
			loadmore() {
				if (this.loadingType == 'noMore') return
				this.params.pageNumber++
				this.loadData()
			},
		},
	};
</script>
<style lang="scss" scoped>
	@import '../search/search.scss';


		.goods-detail {
			background: #fff;

			.title {
				margin-left: 20rpx;
				margin-bottom: 14upx;
				height:66upx;
				display: flex;
				align-items: center;
				white-space: nowrap;
				/* 内容会被修剪，并且其余内容是不可见的。 */
				overflow: hidden;
				/* 显示省略符号来代表被修剪的文本。 */
				text-overflow: ellipsis;
			}
		}
	

	.loactionBox {
		white-space: nowrap;
		overflow: hidden;

		text-overflow: ellipsis image {
			width: 24rpx;
			height: 24rpx;
		}

		p {
			font-size: 24rpx;
			margin-bottom: 5upx;
			color: rgba(173, 170, 170, 1);
		}
	}

	.nodata {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 100rpx;
		flex-direction: column;

		image {
			width: 400rpx;
			height: 400rpx;
		}

		p {
			color: #666;
			margin-top: 50rpx;
			font-size: 28rpx;
			letter-spacing: 6rpx;
		}
	}
</style>
